const Vue = require('vue');
const { createRenderer } = require('vue-server-renderer');
const server = require('express')();

server.get('*', (req, res) => {
    // step1: 创建 Vue 实例
    const app = new Vue({
        data: {
            url: req.url
        },
        template: `<div>访问的url是 {{ url }}</div>`,
    });

    // step2：创建 一个 renderer
    // const renderer = createRenderer();
    const renderer = createRenderer({
        template: require('fs').readFileSync('./index.template.html', 'utf-8')
    })

    const context = {
        title: 'hello',
        meta: `
            <meta title="description" content="hello world">
        `
    }

    // step3：使用创建的renderer，将 Vue 实例渲染为 HTML 字符串
    renderer.renderToString(app, context, (err, html) => {
        if(err) {
            res.status(500).end('server error');
            return;
        }

        // res.end(`
        //     <!DOCTYPE html>
        //     <html lang="en">
        //     <head>
        //         <meta charset="UTF-8">
        //         <meta name="viewport" content="width=device-width, initial-scale=1.0">
        //         <title>Document</title>
        //     </head>
        //     <body>
        //         ${html}
        //     </body>
        //     </html>
        // `);

        // res.setHeader('Content-Type', 'text/html;charset=utf-8');
        res.end(html);
    });
});

server.listen(8080);